const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x = localStorage.getItem('x')
const xObject= JSON.parse(x)
const hashMap = xObject || [
    { logo: 'A', url: 'https://www.acfun.cn' },
    { logo: 'B', url: 'https://bilibili.com' },
    
];
const simplifyUrl=(url) => {
    return url.replace('https://', '')
              .replace('www.', '').replace(/\/.*/,'')//删除/开头的内容直到结尾
}
const render = () => {
    $siteList.find('li:not(.last)').remove()
    hashMap.forEach((node, index) => {
        const $Li = $(`<li>
        <div class='site'>
        <div class="logo">${node.logo[0]}</div>
        <div class="link">${simplifyUrl(node.url)}</div>
        <div class="close">
        <svg class="icon" >
        <use xlink:href="#icon-close-square"></use>
        </svg>
        </div>
        </div>
        </li>`).insertBefore($lastLi)
        $Li.on('click',  () => {
           window.open(node.url)
        })
        $Li.on('click', '.close', (e) => {
            e.stopPropagation() //阻止冒泡
            hashMap.splice(index, 1)
            render()
        })
    })    
}
render()

$('.addButton').on('click', () => {
    let url = window.prompt('请问你要添加的网站是啥?')
    if (url.indexOf('http') !== 0) {
        url = 'https://' + url
    }
    console.log(url)
    hashMap.push({
        logo: simplifyUrl(url)[0].toUpperCase(),
        url: url
    });
    render()
});
window.onbeforeunload = () => {
    const string = JSON.stringify(hashMap)
    localStorage.setItem('x', string)
}

$(document).on('keyup', (e) => {

    const { key, altKey } = e
    for (let i = 0; i < hashMap.length; i++) {
        if (hashMap[i].logo.toLowerCase() === key && altKey) {

            window.open(hashMap[i].url)


        }
    }

})